﻿<template>
    <div id="app">
        <div class="table-wraper">
            <div class="search">
                <div class='selectOption'>
                    <el-button type="success" class='checkBtn' @click='openBox(9999)'>新建配置</el-button>
                </div>
            </div>
            <div class="main">
                <ul class="listTitle">
                    <li v-for='item in titleList'>{{item.label}}</li>
                </ul>
                <ul class="dataList" v-for='(item,index) in tableData'>
                    <li>{{index+1}}</li>
                    <li @click='openSoundEffect(index,1)'><img src="../../../static/img/hui.png" alt=""></li>
                    <li @click='openSoundEffect(index,2)'><img src="../../../static/img/hui.png" alt=""></li>
                    <li><img :src="item.bgImg" alt=""></li>
                    <li><img :src="item.btImg" alt=""></li>
                    <li><img :src="item.clickImg" alt=""></li>
                    <li><img :src="item.countDown" alt=""></li>
                    <li><img :src="item.spanImg" alt=""></li>
                    <li>{{item.span}}</li>
                    <li>
                        <el-button type="success" v-show='item.status == "0"' @click='openStar(index)'>启动</el-button>
                        <el-button type="primary" @click='openBox(index)'>编辑</el-button>
                        <el-button type="danger" @click='openDelete(index)'>删除</el-button>
                    </li>
                </ul>
            </div>
            <div class="block pagination" v-show='nullContentPagination'>
                <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div class="nullContent" v-show='nullContent'>暂无数据</div>
        </div>

           <div class="bomb dialog" v-show='isDialog'>
            <div class="bomb_header">
                <p>{{boxTitle}}</p>
                <span @click="hideBox">
                            <img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10">
                            </span>
            </div>
            <div class="bomb_content">
               <div class="boxContent">
                <section class="bcSet">
                    <p>步长 ：
                        <el-input v-model="bcInput" placeholder="请输入步长(范围1-100)" :maxlength='3'></el-input>
                        <el-checkbox v-model="isUseRadio">是否使用</el-checkbox>
                    </p>
                </section>
                <h4>音效设置</h4>
                <section class="soundSet">
                    <p>
                        点击音效 ：
                        <el-input v-model="clickInput" disabled></el-input>
                        <input type="file" id="uploadVoice1" style='display:none' @change='upLoadClickSound'>
                        <label for="uploadVoice1" class="uploadBtn">选择音效</label>
                        <label class="uploadBtn" @click='listenUpload(1)' v-show='isVoice1'>试听</label>
                        <audio :src="soundUpload1" style="display:none;" id="soundUpload1"></audio>
                    </p>
                    <p>
                        打开音效 ：
                        <el-input v-model="openInput" disabled></el-input>
                        <input type="file" id="uploadVoice2" style='display:none' @change='upLoadOpenSound'>
                        <label for="uploadVoice2" class="uploadBtn">选择音效</label>
                        <label class="uploadBtn" @click='listenUpload(1)' v-show='isVoice2'>试听</label>
                        <audio :src="soundUpload2" style="display:none;" id="soundUpload2"></audio>
                    </p>
                </section>
                <h4>图片设置</h4>
                <section class="imgSet">
                    <ul>
                        <li>
                            <span>未点击按钮状态：</span><img :src="defaultImg1"  @click='changeOrder(1)'>
                            <input type="file" style="display:none" id="uploadImg1" @change="onFileChange">
                        </li>
                        <li>
                            <span>点击按钮状态：</span><img :src="defaultImg2"  @click='changeOrder(2)'>
                            <input type="file" style="display:none" id="uploadImg2" @change="onFileChange">
                        </li>
                        <li>
                            <span>步长背景图：</span><img :src="defaultImg3"  @click='changeOrder(3)'>
                            <input type="file" style="display:none" id="uploadImg3" @change="onFileChange">
                        </li>
                        <li>
                            <span>背景图片：</span><img :src="defaultImg4"  @click='changeOrder(4)'>
                            <input type="file" style="display:none" id="uploadImg4" @change="onFileChange">
                        </li>
                        <li>
                            <span>倒计时图：</span><img :src="defaultImg5"  @click='changeOrder(5)'>
                            <input type="file" style="display:none" id="uploadImg5" @change="onFileChange">
                        </li>
                    </ul>
                </section>
            </div>
            </div>
            <div class="bomb_footer">
                <input type="button" @click="saveSet" value="保存">
                <input type="button" @click="hideBox" value="取消">
            </div>
        </div>
        <div class="layer" v-show='layer'></div>
        <!--隐藏的播放音效-->
        <audio :src="soundSrc1" style="display:none;" id="audio1" controls="controls"></audio>
        <audio :src="soundSrc2" style="display:none;" id="audio2" controls="controls"></audio>
    </div>
</template>

<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                tableData: [],
                titleList: this.$store.state.indexSet.titleList,
                currentPage: 1,
                total: 0,
                layer: false,
                isPlaying: false,
                soundSrc1: '',
                soundSrc2: '',
                playNum: 1,
                isDialog: false,
                isVoice1: false,
                isVoice2: false,
                nullContent: false,
                nullContentPagination: true,
                boxTitle: '',
                bcInput: '',
                clickInput: '',
                openInput: '',
                isUseRadio: false,
                defaultImg1: this.default,
                defaultImg2: this.default,
                defaultImg3: this.default,
                defaultImg4: this.default,
                defaultImg5: this.default,
                default: '../../../static/img/icon_xinjian_picture@2x.png',
                indexMark: 0,
                soundUpload1: '',
                soundUpload2: '',
                uploadImgOrder: '',
                saveType: ''
            }
        },
        watch: {},
        methods: {
            // 获取首页配置
            getIndexSet(list) {
                this.$store.commit('showLoading');
                this.getIndexSetList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.total = data.data.count;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.tableData = data.data.list;
                        // 预加载音频
                        for (let i = 0; i < this.tableData.length; i++) {
                            this.soundSrc1 = this.tableData[i].click;
                            this.soundSrc2 = this.tableData[i].open;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 分页跳转
            handleCurrentChange(val) {
                this.currentPage = val;
                let list = {
                    pageSize: 10,
                    pageNo: val,
                    token: sessionStorage.token
                };
                this.getIndexSet(list);
            },
            // 播放音效
            openSoundEffect(i, o) {
                let audio1 = document.querySelector('#audio1'),
                    audio2 = document.querySelector('#audio2');
                if (o == 1) {
                    this.soundSrc1 = this.tableData[i].click;
                    audio1.play();
                } else {
                    this.soundSrc2 = this.tableData[i].open;
                    audio2.play();
                }
            },
            // 打开新建和编辑弹框
            openBox(i) {
                this.layer = this.isDialog = true;
                if (i == 9999) {
                    this.saveType = 1;
                    this.boxTitle = '添加首页配置';
                    this.bcInput = '';
                    this.isUseRadio = false;
                    this.clickInput = '';
                    this.openInput = '';
                    this.defaultImg1 = this.defaultImg2 = this.defaultImg3 = this.defaultImg4 = this.defaultImg5 = this.default;
                } else {
                    this.saveType = 2;
                    this.indexMark = i;
                    this.boxTitle = '修改首页配置';
                    this.bcInput = this.tableData[i].span;
                    this.isUseRadio = this.tableData[i].status == 1 ? true : false;
                    this.clickInput = this.tableData[i].click;
                    this.openInput = this.tableData[i].open;
                    this.defaultImg1 = this.tableData[i].btImg;
                    this.defaultImg2 = this.tableData[i].clickImg;
                    this.defaultImg3 = this.tableData[i].spanImg;
                    this.defaultImg4 = this.tableData[i].bgImg;
                    this.defaultImg5 = this.tableData[i].countDown;
                }
            },
            // 隐藏新建和编辑弹框
            hideBox() {
                this.layer = this.isDialog = false;
            },
            // 上传点击音效
            upLoadClickSound(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(mp3)$/i.test(files[0].name) || !files.length) {
                    this.$message.warning('请选择音效格式!');
                    return;
                }
                this.upLoadSound(files[0], 1);
            },
            // 上传打开音效
            upLoadOpenSound(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(mp3)$/i.test(files[0].name) || !files.length) {
                    this.$message.warning('请选择音效格式!');
                    return;
                }
                this.upLoadSound(files[0], 2);
            },
            // 上传音效
            upLoadSound(file, i) {
                var formdata = new FormData();
                formdata.append('token', sessionStorage.token);
                formdata.append('appId', "com_sxluckyking_double");
                formdata.append('file', file);
                formdata.append('appName', 'appName');
                this.uploadFile(formdata).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('音效上传成功!');
                        if (i == 1) {
                            this.clickInput = this.soundUpload1 = data.data[0].path;
                            this.isVoice1 = true;
                        } else {
                            this.openInput = this.soundUpload1 = data.data[0].path;
                            this.isVoice2 = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 上传试听
            listenUpload(i) {
                let v1 = document.querySelector('#soundUpload1');
                let v2 = document.querySelector('#soundUpload2');
                if (i = 1) {
                    v1.play();
                } else {
                    v2.play();
                }
            },
            // 选择图片上传
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(jpg|jpeg|png|gif)$/i.test(files[0].name) || !files.length) {
                    this.$message.warning('请选择正确图片格式!');
                    return;
                }
                this.uploadImage(files[0]);
            },
            // 上传图片
            uploadImage(file) {
                var formdata = new FormData();
                formdata.append('token', sessionStorage.token);
                formdata.append('appId', "com_sxluckyking_double");
                formdata.append('file', file);
                formdata.append('appName', 'appName');
                this.uploadFile(formdata).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('图片上传成功!');
                        switch (this.uploadImgOrder) {
                            case 1:
                                this.defaultImg1 = data.data[0].path;
                                break;
                            case 2:
                                this.defaultImg2 = data.data[0].path;
                                break;
                            case 3:
                                this.defaultImg3 = data.data[0].path;
                                break;
                            case 4:
                                this.defaultImg4 = data.data[0].path;
                                break;
                            case 5:
                                this.defaultImg5 = data.data[0].path;
                                break;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 保存配置
            saveSet() {
                let list = {
                    token: sessionStorage.token,
                    bgImg: this.defaultImg4,
                    btImg: this.defaultImg1,
                    clickImg: this.defaultImg2,
                    click: this.clickInput,
                    open: this.openInput,
                    span: this.bcInput,
                    status: this.isUseRadio == true ? 1 : 0,
                    spanImg: this.defaultImg3,
                    countDown: this.defaultImg5
                }
                if (this.bcInput == '' || this.bcInput > 100 || this.bcInput < 1) {
                    this.$message.warning('请输入正确的步长!');
                } else if (this.openInput == '' || this.clickInput == '') {
                    this.$message.warning('请选择音效!');
                } else if (this.defaultImg1 == this.default || this.defaultImg2 == this.default || this.defaultImg3 == this.default || this.defaultImg4 == this.default || this.defaultImg5 == this.default) {
                    this.$message.warning('请选择背景图片!');
                } else {
                    if (this.saveType == 1) {
                        // 添加
                        this.addIndexSet(list).then((data) => {
                            console.log(data);
                            if (data.code === 200) {
                                this.hideBox();
                                this.$message.success('新建成功!');
                                this.handleCurrentChange(this.currentPage);
                            } else {
                                this.$message(data.message);
                            }
                        }).catch(msg => console.log(msg));
                    } else {
                        // 修改
                        list.id = this.tableData[this.indexMark].id;
                        this.updateIndexSetList(list).then((data) => {
                            console.log(data);
                            if (data.code === 200) {
                                this.hideBox();
                                this.$message.success('修改成功!');
                                this.handleCurrentChange(this.currentPage);
                            } else {
                                this.$message(data.message);
                            }
                        }).catch(msg => console.log(msg));
                    }
                }
            },
            changeOrder(i) {
                this.uploadImgOrder = i;
                let id = '#uploadImg'+i;
                document.querySelector(id).click();
            },
            // 启动配置
            star(i) {
                let list = {
                    token: sessionStorage.token,
                    id: this.tableData[i].id,
                    status: 1
                }
                this.updateIndexSetList(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.hideBox();
                        this.$message.success('启动成功!');
                        this.handleCurrentChange(this.currentPage);
                    } else {
                       this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 打开启动提示框
            openStar(i) {
                this.$confirm('确定启动此项配置?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.star(i);
                }).catch(() => {});
            },
            // 打开删除框
            openDelete(i) {
                this.$confirm('确定删除此项配置?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delete(i);
                }).catch(() => {});
            },
            // 删除
            delete(i) {
                let id = this.tableData[i].id
                this.deleteIndexSet(id).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.hideBox();
                        this.$message.success('删除成功!');
                        this.handleCurrentChange(this.currentPage);
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            ...mapActions(['getIndexSetList', 'updateIndexSetList', 'uploadFile', 'deleteIndexSet', 'addIndexSet'])
        },
        created: function() {
            let list = {
                pageSize: 10,
                pageNo: 1,
                token: sessionStorage.token
            }
            this.getIndexSet(list);
        }
    }
</script>

<style scoped>
    #app {
        position: relative;
    }
    p,
    ul,
    h2,
    h4 {
        margin: 0;
    }
    h2 {
        text-align: center;
        color: rgb(109, 148, 189);
        border-bottom: 1px solid #ccc;
        padding: 10px 0 20px 0;
        font-size: 20px;
    }
    h4 {
        margin: 0;
        text-align: left;
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #ccc;
    }
    .table-wraper {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 5px;
    }
    .el-table {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
  
    .listTitle li:last-child,
    .dataList li:last-child {
        border-right: none;
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 4%;
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 8%;
        cursor: pointer;
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 8%;
        cursor: pointer;
    }
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 10%;
    }
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 12%;
    }
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 12%;
    }
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 9%;
    }
    .listTitle li:nth-child(8),
    .dataList li:nth-child(8) {
        width: 12%;
    }
    .listTitle li:nth-child(9),
    .dataList li:nth-child(9) {
        width: 6%;
    }
    .listTitle li:nth-child(10),
    .dataList li:nth-child(10) {
        width: 19%;
    }
    .dialog {
        width: 670px;
        height: 660px;
    }
    .dialog .bomb_content{
        height:512px;
    }
    .boxContent {
        width: 100%;
        height: 520px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .bcSet {
        width: 100%;
        height: 70px;
    }
    .bcSet p,
    .soundSet p {
        height: 70px;
        line-height: 70px;
        text-align: left;
        font-size: 16px;
    }
    .el-input {
        width: 30%;
    }
    .soundSet .el-input {
        width: 55%;
        margin-right: 10px;
    }
    .el-checkbox {
        margin: 0 0 0 150px;
    }
    .soundSet {
        width: 100%;
        height: 140px;
    }
    .imgSet {
        width: 100%;
        padding-top: 10px;
    }
    .imgSet li {
        width: 50%;
        float: left;
        height: 120px;
        line-height: 120px;
        font-size: 15px;
        position: relative;
    }
    .imgSet span {
        display: inline-block;
        width: 38%;
        text-align: right;
        float: left;
    }
    .imgSet img {
        max-width: 100px;
        float: left;
        margin-left: 10px;
    }
    .userInfoClose {
        position: absolute;
        top: 25px;
        right: 50px;
        cursor: pointer;
    }
    .search {
        width: 100%;
        padding: 8px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption {
        float: right;
        text-align: right;
    }
    .checkBtn {
        width: 96px;
    }
    .dataList img{
        width:20px;
        margin:0;
    }
</style>
